<template>
  <div>
    <div class="box">🔔 {{ billboard.content }}</div>
    <div class="columns"> 
      <!-- Bulma库的使用 -->
      <div class="column is-three-quarters">
        <!-- is-three-quarters代表其占用四分之三 -->
        <TopicList></TopicList>
      </div>
      <div class="column">
        <CardBar></CardBar>
      </div>
    </div>
  </div>
</template>

<script>
import { getBillboard } from '@/api/billboard';
import PostList from '@/views/post/Index';
import CardBar from "@/views/card/CardBar";

export default {
  name: "Home",
    // 组件
  components: {CardBar, TopicList: PostList}, //将TopicList取一个别名
  data() {
    return {
      billboard: {
        content: '',
      },
    };
  },
  //created生命周期，页面创建成功开始调用
  created() {
    this.fetchBillboard();
  },
  methods: {
    // 返回的都是promise 承诺方法
    async fetchBillboard() {
      getBillboard().then((value) => {
        //绑定对象data
        const { data } = value;
        this.billboard = data;
      });
    },
  },
};
</script>
